<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/util.js"></script>
</head>
<body>
    <div id="app">
        <el-input
                placeholder="姓名"
                v-model="query.name" style="width: 180px;"
                clearable>
        </el-input>
        <el-input
                placeholder="年龄" type="number" style="width: 180px;"
                v-model="query.age1"
                clearable>
        </el-input>-
        <el-input
                placeholder="年龄" type="number" style="width: 180px;"
                v-model="query.age2"
                clearable>
        </el-input>
        <el-date-picker
                v-model="query.birth1"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <el-date-picker
                v-model="query.birth2"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <el-select v-model="query.did" clearable placeholder="请选择">
            <el-option
                    v-for="d in deptData"
                    :label="d.dname"
                    :value="d.id">
            </el-option>
        </el-select>
        <el-select v-model="query.sex" clearable placeholder="请选择">
            <el-option
                    label="男"
                    value="男">
            </el-option>
            <el-option
                    label="女"
                    value="女">
            </el-option>
        </el-select>
        <el-button @click="toAdd">添加</el-button>
        <el-button @click="delAll">批量删除</el-button>
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
            >
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="hobby"
                    label="爱好">
            </el-table-column>
            <el-table-column
                    prop="dname"
                    label="部门">
            </el-table-column>
            <el-table-column label="生日">
                <template slot-scope="scope">
                    {{new Date(scope.row.birth).Format('yyyy-MM-dd')}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button size="mini"type="danger" @click="delOne(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PageInfo.total">
        </el-pagination>

        <el-dialog :title="mode.title" :visible.sync="dialogFormVisible":before-close="closeForm">
            <el-form :model="form" >
                <el-form-item label="姓名" :label-width="formLabelWidth" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" >
                    <el-input v-model="form.age" type="number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" >
                    <el-radio v-model="form.sex" label="男">男</el-radio>
                    <el-radio v-model="form.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="爱好" :label-width="formLabelWidth" >
                    <el-checkbox-group v-model="hobby">
                        <el-checkbox label="吃"></el-checkbox>
                        <el-checkbox label="喝"></el-checkbox>
                        <el-checkbox label="玩"></el-checkbox>
                        <el-checkbox label="乐"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="生日" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="form.birth"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="form.did" clearable placeholder="请选择">
                        <el-option
                                v-for="d in deptData"
                                :label="d.dname"
                                :value="d.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
    <script>
        new Vue({
            el:'#app',
            data:{
                dialogFormVisible:false,
                tableData:[],
                PageInfo:{},
                query: {
                    name: '',
                    sex: '',
                    age1: '',
                    age2: '',
                    did: '',
                    birth1: '',
                    birth2: '',
                    page: 1,
                    size: 2
                },
                deptData:[],
                form:{
                    name:'',
                    age:'',
                    sex:'',
                    hobby:'',
                    birth:'',
                    did:''
                },
                hobby:[],
                mode:{
                    url:'',
                    title:''
                },
                multipleSelection:[],

            },
            watch:{
                query:{
                    deep:true,
                    handler(){
                        this.initData();
                    }
                }
            },
            methods:{
                closeForm(done){
                    this.initForm();
                    done();
                },
                delAll(){
                    let ids=this.multipleSelection.map(e=>e.id);
                    this.delReal(ids);
                },

                delReal(ids){
                    this.$confirm('确认删除？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get(`/emp/delAll.action?ids=${ids}`).then(res=>{
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                delOne(id){
                    this.delReal(id);
                },
                toEdit(e){
                    this.form=JSON.parse(JSON.stringify(e));
                    this.hobby=this.form.hobby.split(",")
                    this.mode={
                        url:'/emp/edit.action',
                        title:'修改员工'
                    }
                    this.dialogFormVisible=true;
                },
                initForm(){
                    this.form={
                        name:'',
                        age:'',
                        sex:'',
                        hobby:'',
                        birth:'',
                        did:''
                    }
                    this.hobby=[];
                    this.dialogFormVisible=false;
                },
                add(){
                    this.form.hobby=this.hobby.join(",")
                  axios.post(this.mode.url,this.form).then(res=>{
                      this.initData();
                      this.initForm();
                  })
                },
                toAdd(){
                    this.mode={
                        url:'/emp/add.action',
                        title:'添加员工'
                    }
                    this.dialogFormVisible=true;
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleSizeChange(val) {
                    this.query.size=val;
                },
                handleCurrentChange(val) {
                    this.query.page=val;
                },
                initData(){
                    axios.post(`/emp/findPage.action?page=${this.query.page}&size=${this.query.size}`,this.query).then(res=>{
                        this.PageInfo=res.data;
                        this.tableData=res.data.list;
                        if (this.tableData.length==0&&this.query.page>1){
                            this.query.page--;
                        }
                    })
                },
                initDept(){
                    axios.get(`/emp/findDept.action`).then(res=>{
                        this.deptData=res.data;

                    })
                }
            },
            created(){
                this.initData();
                this.initDept();
            }
        })
    </script>
</html>